import React, { Component } from 'react';
// connect 一般会把它称之为 高阶组件,原则上 connect()称之为高阶组件
import { connect } from 'react-redux'
import actions from './store/actionCreator/pro'
// 展示组件 --- UI组件
class App extends Component {
  componentDidMount () {
    this.props.getBannerList()
    this.props.getProList()
  }
  render() {
    const { count, proList } = this.props
    return (
      <div> 
        <button onClick = { () => {
          this.props.reduceFn()
        }}>-</button>  
        { count }
        <button onClick = { () => {
          this.props.addFn()
        }}>+</button>  
        <hr />
        {
          proList && proList.map(item => {
            return (
              <h4 key = { item.proid }>{
                item.proname
              }</h4>
            )
          })
        }
      </div>
    );
  }
}
// connect()(App)
// connect(() => {}, () => {})
// mapStateToProps 负责给组件提供状态使用的，默认参数为state
const mapStateToProps = (state) => {
  return {
    // count: state.app.count,
    // proList: state.pro.proList,
    // bannerList: state.pro.bannerList
    count: state.getIn(['app', 'count']),
    bannerList: state.getIn(['pro', 'bannerList']),
    proList: state.getIn(['pro', 'proList'])
  }
}

const REDUCE_ACTION = {
  type: 'REDUCE',
  payload: 5
}
// mapDispatchToProps 负责组件的业务逻辑，默认参数为disaptch,可以触发修改状态
const mapDispatchToProps = (dispatch) => {
  return {
    reduceFn () {
      dispatch(REDUCE_ACTION)
    },
    addFn () {
      dispatch({
        type: 'ADD',
        payload: 5
      })
    },
    getBannerList () {
      // 不要加括号
      // dispatch 触发 thunk 异步操作
      dispatch(actions.getBannerListAction)
    },
    getProList () {
      // fetch('http://121.89.205.189/api/pro/list')
      //   .then(res => res.json())
      //   .then(res => {
      //     dispatch({
      //       type: 'CHANGE_PRO_LIST',
      //       payload: res.data
      //     })
      //   })
      // 因为要参数，需要加（）传递
      dispatch(actions.getProListAction(2))
    }
  }
}
// 暴露出去的其实就是 容器组件
export default connect(mapStateToProps, mapDispatchToProps)(App)